@import "../../style/template";
@import "../../style/vars";

.footer {
  margin-top: auto;
  position: absolute;
  display: flex;
  justify-content: center;
  width: 100%;
  background-color: $background-color;

  &__container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2%;
  }

  &__logo {
    margin-left: 2%;
  }

  &__logo-icon {
    max-width: 100%;
    width: 100%;

    @media #{$tablet} {
        width: 80%;
    }
    @media #{$mobile} {
        width: 60%;
    }
  }

  &__messenger-lists{
    display: flex;
    justify-content: space-around;
  }

  &__messenger-list{
    cursor: pointer;
    @media #{$tablet}{
        width: 25%;
    }
    @media #{$mobile} {
        width: 20%;
    }
  }

  &__messenger-text{
    @extend %font-text;
    font-size: 23px;
    @media #{$tablet}{
        font-size: 20px;
    }
    @media #{$mobile} {
        font-size: 13px;
    }
  }

  &__messenger {
    padding-right: 2%;

    @media #{$tablet}{
        // width: 25%;
    }
    @media #{$mobile} {
        width: 20%;
    }
  }

  .container {
    @extend %container;
  }
}
